<template>
  <a-modal
    v-model:visible="addCodeTable1"
    :title="codeDialogName1"
    :width="800"
    @ok="props.dialogStatue === 'add' ? handleOk() : handleEditOk()"
    @Cancel="props.dialogStatue === 'add' ? handleCancel() : handleEditCancel()"
  >
    <a-form ref="standardForm" :model="formState" name="basic" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }" autocomplete="off">
      <a-form-item label="中文名称" name="standardName" :rules="rules">
        <a-input v-model:value="formState.standardName" placeholder="请输入标准的中文名称" />
      </a-form-item>
      <a-form-item label="英文名称" name="standardEnglish" :rules="[{ required: true, message: '不能为空' }]">
        <a-input v-model:value="formState.standardEnglish" placeholder="请输入标准的英文名称" />
      </a-form-item>
      <a-form-item label="标准说明">
        <a-input v-model:value="formState.standardMsg" placeholder="请输入标准声明" />
      </a-form-item>

      <a-form-item label="来源机构" name="standardSource" :rules="[{ required: true, message: '来源机构不能为空!', trigger: ['blur', 'change'] }]">
        <a-select v-model:value="formState.standardSource">
          <a-select-option value="数宜信">数宜信</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="是否可为空" :rules="[{ required: true, message: '不能为空!', trigger: ['blur', 'change'] }]">
        <a-select v-model:value="NullValue" :options="options1"></a-select>
      </a-form-item>
      <a-form-item label="数据类型" name="standardDataType" :rules="[{ required: true, message: '数据类型不能为空!', trigger: ['blur', 'change'] }]">
        <a-select ref="select" v-model:value="TypeValue" :options="options"> </a-select>
      </a-form-item>

      <template v-if="TypeValue == '3'">
        <a-form-item label="取值范围">
          <a-input-number v-model:value="formState.standardDataMin" class="" placeholder="请输入标准数据最小值" />
          ——<a-input-number v-model:value="formState.standardDataMax" placeholder="请输入标准数据最大值" />
        </a-form-item>
        <a-form-item label="默认值">
          <a-input v-model:value="formState.standardDefault" placeholder="请输入默认值" />
        </a-form-item>
      </template>

      <template v-else-if="TypeValue == '2'">
        <a-form-item label="数据精度" :rules="[{ pattern: /(^[1-9]+\d*$)|(^0$)/, message: '数据精度是非负整数', trigger: ['blur', 'change'] }]">
          <a-input v-model:value="formState.standardDataAccuracy" placeholder="请输入标准数据并保留小数位" />
        </a-form-item>
        <a-form-item label="取值范围">
          <a-input-number v-model:value="formState.standardDataMin" class="" placeholder="请输入标准数据最小值" />
          ——<a-input-number v-model:value="formState.standardDataMax" placeholder="请输入标准数据最大值" />
        </a-form-item>
        <a-form-item label="默认值">
          <a-input v-model:value="formState.standardDefault" placeholder="请输入默认值" />
        </a-form-item>
      </template>

      <template v-else-if="TypeValue == '1'">
        <a-form-item label="数据长度" :rules="[{ pattern: /^[1-9][0-9]*$/, message: '数据长度只能是正整数', trigger: ['blur', 'change'] }]">
          <a-input v-model:value="formState.standardDataLength" placeholder="请输入标准数据最大长度" />
        </a-form-item>
        <a-form-item label="默认值">
          <a-input v-model:value="formState.standardDefault" placeholder="请输入默认值" />
        </a-form-item>
      </template>

      <template v-else-if="TypeValue == '4'">
        <a-form-item label="默认值">
          <a-input v-model:value="formState.standardDefault" placeholder="请输入默认值" />
        </a-form-item>
        <a-form-item label="数据长度" :rules="[{ pattern: /^[1-9][0-9]*$/, message: '数据长度只能是正整数', trigger: ['blur', 'change'] }]">
          <a-input v-model:value="formState.standardDataLength" placeholder="请输入标准数据最大长度" />
        </a-form-item>
      </template>
      <template v-else> </template>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
  import { AddStandard, modifyStandard } from '@/api/test/Standard';
  import { reactive, ref, watch } from 'vue';
  import { FormState } from '../type/addDatas';
  //下拉框
  const options = [
    { value: 1, label: 'String' },
    { value: 2, label: 'Float' },
    { value: 3, label: 'Int' },
    { value: 4, label: 'Enum' },
  ];
  const options1 = [
    { value: 1, label: '不可为空' },
    { value: 2, label: '可为空' },
  ];
  const props = defineProps({
    dataList: {
      type: Object,
      default: () => {
        return {};
      },
    },
    addCodeTable: {
      type: Boolean,
      default: false,
    },
    codeDialogName: {
      type: Boolean,
    },
    dialogStatue: {
      type: String,
    },

    newData: {
      type: String,
      // default: () => [],
    },
  });
  const getCurrentTime = () => {
    //获取当前时间
    let yy = new Date().getFullYear();
    let mm = new Date().getMonth() + 1;
    let dd = new Date().getDate();
    let hh = new Date().getHours();
    let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
    let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
    let getdate = yy + '年' + mm + '月' + dd + '日';
    let gettime = hh + ':' + mf + ':' + ss;
    return getdate + gettime;
  };
  console.log('....', props.dataList);
  //弹窗状态
  const emit = defineEmits(['changeShow', 'editSuccessed']);
  const addCodeTable1 = ref<boolean>(false);
  // const editableData1 = ref<boolean>(false);
  const codeDialogName1 = ref<string>('');
  const Nullvalues = ref<string>('');
  const Nullvalues2 = ref<string>('');
  watch(
    () => props.addCodeTable,
    (nvalue: boolean) => {
      addCodeTable1.value = nvalue;
      if (props.dialogStatue == 'add') {
        codeDialogName1.value = '新增标准';
        formState.codesId = '';
        formState.standardName = '';
        formState.standardEnglish = '';
        formState.standardMsg = '';
        formState.standardSource = '';
        formState.standardIsNull = 3;
        formState.standardDataType = 5;
        formState.standardDefault = 0;
        formState.standardDataLength = null;
        formState.standardDataAccuracy = null;
        formState.standardDataMax = '';
        formState.standardDataMin = '';
        NullValue.value = '';
        TypeValue.value = '';
      } else {
        if (props.dataList.standardIsNull == 0) {
          Nullvalues.value = '可为空';
        }
        if (props.dataList.standardIsNull == 1) {
          Nullvalues.value = '不可为空';
        }

        if (props.dataList.standardDataType == 1) {
          Nullvalues2.value = 'String';
        }
        if (props.dataList.standardDataType == 2) {
          Nullvalues2.value = 'Float';
        }
        if (props.dataList.standardDataType == 3) {
          Nullvalues2.value = 'Int';
        }
        if (props.dataList.standardDataType == 4) {
          Nullvalues2.value = 'Enum';
        }
        codeDialogName1.value = '编辑码表';
        formState.standardId = props.dataList.standardId;
        formState.codesId = props.dataList.codesId;
        formState.standardName = props.dataList.standardName;
        formState.standardEnglish = props.dataList.standardEnglish;
        formState.standardMsg = props.dataList.standardMsg;
        formState.standardSource = props.dataList.standardSource;
        NullValue.value = Nullvalues.value;
        TypeValue.value = Nullvalues2.value;
        formState.standardDefault = props.dataList.standardDefault;
        formState.standardDataLength = props.dataList.standardDataLength;
        formState.standardDataAccuracy = props.dataList.standardDataAccuracy;
        formState.standardDataMax = props.dataList.standardDataMax;
        formState.standardDataMin = props.dataList.standardDataMin;
      }
    },
  );
  // let dataSource: Ref<DataItem1[]> = ref([]);
  // const editableData: UnwrapRef<Record<string>> = reactive({});
  const modalText = ref<string>('Content of the modal');
  let formState = reactive<FormState>({
    standardId: '',
    codesId: '',
    standardName: '',
    standardEnglish: '',
    standardMsg: '',
    standardSource: '',
    standardIsNull: 0,
    standardDataType: 1 || 2 || 3 || 4,
    standardDefault: null,
    standardDataLength: null,
    standardDataAccuracy: null,
    standardDataMax: '',
    standardDataMin: '',
  });
  const standardForm = ref();
  const NullValue = ref();
  const TypeValue = ref();
  const handleOk = async () => {
    const result1 = await standardForm.value.validate();

    // 数据类型(1:string;2:float;3:int;4:Enum)
    if (TypeValue.value == '1') {
      formState.standardDataType = 1;
      formState.standardDefault = '1';
    } else if (TypeValue.value == '2') {
      formState.standardDataType = 2;
      formState.standardDefault = 1.1;
    } else if (TypeValue.value == '3') {
      formState.standardDataType = 3;
      formState.standardDefault = 1;
    } else if (TypeValue.value == '4') {
      formState.standardDataType = 4;
      formState.standardDefault = 1;
    }
    let data = {
      standardId: formState.standardId,
      codesId: formState.codesId,
      standardName: formState.standardName,
      standardEnglish: formState.standardEnglish,
      standardMsg: formState.standardMsg,
      standardSource: formState.standardSource,
      standardIsNull: NullValue.value == '不可为空' ? 1 : 0,
      standardDataType: formState.standardDataType,
      standardDefault: formState.standardDefault,
      standardDataLength: 9,
      // standardDataLength: formState.standardDataLength,
      standardDataAccuracy: 0,
      // standardDataAccuracy: formState.standardDataAccuracy,
      standardDataMax: formState.standardDataMax,
      standardDataMin: formState.standardDataMin,

      // ----------------

      addTime: getCurrentTime(),
      modifyTime: getCurrentTime(),
      standardIsDelete: 0,
      standardStatus: 0,
    };
    console.log(data, 'standard');
    addCodeTable1.value = false;
    // editableData1.value = false;
    const resAddStandard = await AddStandard(data);
    console.log(resAddStandard, 'dadada');
    emit('editSuccessed', data);
    emit('changeShow', 'false');
  };

  const handleEditOk = async () => {
    const result1 = await standardForm.value.validate();
    let datas = {
      codesId: formState.codesId,
      standardId: formState.standardId,
      standardName: formState.standardName,
      standardEnglish: formState.standardEnglish,
      standardMsg: formState.standardMsg,
      standardSource: formState.standardSource,
      standardIsNull: formState.standardIsNull,
      standardDataType: formState.standardDataType,
      standardDefault: formState.standardDefault,
      standardDataLength: formState.standardDataLength,
      standardDataAccuracy: formState.standardDataAccuracy,
      standardDataMax: formState.standardDataMax,
      standardDataMin: formState.standardDataMin,
    };
    addCodeTable1.value = false;
    modifyStandard(datas).then(res => {
      emit('editSuccessed', datas);
      emit('changeShow', 'false');
    });
  };

  // 检查名字是否重复
  const NameValidator = (_rule: any, value: string) => {
    if (value) {
      console.log(value);
      let nameLength: number | undefined = props.newData?.split(',').indexOf(value);
      if (nameLength == -1) {
        return Promise.resolve();
      } else {
        return new Promise((resolve, reject) => {
          reject('码表名称不能重复');
        });
      }
    } else {
      return Promise.resolve();
    }
  };
  const rules = [
    { required: true, message: '标准名称不能为空!', trigger: ['blur', 'change'] },
    { pattern: /^[\u4e00-\u9fa5]{2,16}$/, message: '标准名称必须为汉字', trigger: ['blur', 'change'] },
    { validator: NameValidator, trigger: ['blur', 'change'] },
  ];

  //调用新增弹窗的关闭按钮方法
  const handleCancel = () => {
    standardForm.value.clearValidate(); //清除校验
    emit('changeShow', 'false');
  };
  //调用编辑弹窗的关闭按钮方法
  const handleEditCancel = () => {
    standardForm.value.clearValidate(); //清除校验
    emit('changeShow', 'false');
  };
</script>
<style lang="less" scoped>
  // 新增码表弹窗
  .editable-cell {
    position: relative;

    .editable-cell-input-wrapper,
    .editable-cell-text-wrapper {
      padding-right: 24px;
    }

    .editable-cell-text-wrapper {
      padding: 5px 24px 5px 5px;
    }

    .editable-cell-icon,
    .editable-cell-icon-check {
      position: absolute;
      right: 0;
      width: 20px;
      cursor: pointer;
    }

    .editable-cell-icon {
      display: none;
      margin-top: 4px;
    }

    .editable-cell-icon-check {
      line-height: 28px;
    }

    .editable-cell-icon:hover,
    .editable-cell-icon-check:hover {
      color: #108ee9;
    }

    .editable-add-btn {
      margin-bottom: 8px;
    }

    .error-infos :deep(.ant-form-explain) {
      white-space: pre-line;
    }
  }
</style>
